<template>
    <div class="form-wrapper">
                <el-divider class="divider-style" v-if="searchData.nodes.length!=0">节点搜索结果</el-divider>
        <el-card class="search-item"
                 shadow="hover"
                 @click.native="chooseNode"
                 v-for="(node,index) in searchData.nodes"
                 :id="node.id"
                 :key="node.id">
            <div slot="header">
                <el-tag size="mini" type="light">{{typeList.nodeStyleList[index].label}}</el-tag>
                <el-tag size="mini" type="plain">名称:{{node.label}}</el-tag>
            </div>
            <div>节点id: {{node.id}}</div>
            <div>节点信息: {{node.content}}</div>
            <div>节点位置(x,y):({{node.fx}},{{node.fy}})</div>
        </el-card>
                <el-divider class="divider-style" v-if="searchData.edges.length!=0">边名搜索结果</el-divider>
        <el-card class="search-item"

                 shadow="hover"
                 @click.native="chooseEdge"
                 v-for="(edge,index) in searchData.edges"
                 :id="edge.id"
                 :key="edge.id">
            <div slot="header">
                <el-tag size="mini" type="light">{{typeList.edgeStyleList[index].label}}边</el-tag>
                <el-tag size="mini" type="plain">名称:{{edge.label}}</el-tag>
            </div>
            <div>边id: {{edge.id}}</div>
            <div>边信息: {{edge.content}}</div>
            <div>边连接点(source,target):({{edge.sourceId}},{{edge.targetId}})</div>
        </el-card>
                <el-divider class="divider-style" v-if="searchData.nodes_content.length!=0">节点内容搜索结果</el-divider>
        <el-card class="search-item"
                 shadow="hover"
                 @click.native="chooseNode"
                 v-for="(node,index) in searchData.nodes_content"
                 :id="node.id"
                 :key="node.id">
            <div slot="header">
                <el-tag size="mini" type="light">{{typeList.nodeStyleList[index].label}}节点</el-tag>
                <el-tag size="mini" type="plain">名称:{{node.label}}</el-tag>
            </div>
            <div>节点id: {{node.id}}</div>
            <div>节点信息: {{node.content}}</div>
            <div>节点位置(x,y):({{node.fx}},{{node.fy}})</div>
        </el-card>
    </div>
</template>

<script>
    import d3ClassGetter from "../../assets/javascript/d3ClassGetter";

    export default {
        name: "searchForm",
        data() {
            return {
                typeList: d3ClassGetter
            };
        },
      props: {
            searchData: {
                type: Object,
                default: null
            },
            searchMethods: {
                type: Object,
                default: null
            }
        },
        methods: {
            chooseNode(event) {
                this.searchMethods.highLightNode(event.target.parentNode.parentNode.id);
            },
            chooseEdge(event) {
                this.searchMethods.highLightEdge(event.parentNode.parentNode.id);
            }
        }
    };
</script>

<style scoped>
    @import "../../assets/styles/formStyle.css";
</style>